/**
 * 网络请求的时候显示的转圈
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Modal,
    ActivityIndicator
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center'
    },
    background: {
        width:100,
        height:100,
        backgroundColor:'#000000cc',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius:10,
    },
    textContent: {
        fontSize: 14,
        color:'white',
        marginTop:10,
    },
    indicatorBgStyle:{
        backgroundColor:'white',
        padding:10,
        borderRadius:100,
    }
});

const ANIMATION = ['none', 'slide', 'fade'];
const SIZES = ['small', 'normal', 'large'];

export default class Spinner extends React.Component {

    constructor(props) {
        super(props);
        this.state = { visible: this.props.visible, textContent: this.props.textContent };
    }
    static defaultProps = {
        visible: false,
        cancelable: false,
    };

    close() {
        this.setState({ visible: false });
    }

    componentWillReceiveProps(nextProps) {
        const { visible, textContent } = nextProps;
        this.setState({ visible, textContent });
    }

    _handleOnRequestClose() {
        if (this.props.cancelable) {
            this.close();
        }
    }

    _renderDefaultContent() {
        return (
            <View style={styles.background}>
                <View style={styles.indicatorBgStyle}>
                <ActivityIndicator
                    color={'#facf35'}
                    size={30}/>
                </View>
                <Text style={styles.textContent}>载入中...</Text>
            </View>
        );
    }

    _renderSpinner() {
        const { visible } = this.state;

        if (!visible)
            return null;

        const spinner = (
            <View style={styles.container} key={`spinner_${Date.now()}`}>
                {this._renderDefaultContent()}
            </View>
        );

        return (
            <Modal
                animationType={'none'}
                onRequestClose={() => this._handleOnRequestClose()}
                supportedOrientations={['landscape', 'portrait']}
                transparent
                visible={visible}>
                {spinner}
            </Modal>
        );

    }

    render() {
        return this._renderSpinner();
    }

}
